<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 id="msg">{{msg}}</h1>
        <button @click="handleClick">change</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                msg:"hhh"
            },
            methods:{
                handleClick:function(){
                    this.msg="aaaa";
                    /*
                        Vue 实现响应式并**不是数据发生变化之后 DOM 立即变化**，而是按一定的策略进行 DOM 的更新。简单来说，Vue在修改数据后，视图不会立刻更新，而是等**同一事件循环**中的所有数据变化完成之后，再统一进行视图更新。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
                    */
                    // 当这个事件触发时，虽然this.msg的值改变了，但是Dom会在Vue完成后才改变
                    console.log(document.getElementById("msg").innerHTML);// hhh
                    // $nextTick
                    this.$nextTick(function(){
                        console.log("$nextTick里面调用的：",document.getElementById("msg").innerHTML);// $nextTick里面调用的： aaaa
                    })

                }

            }

        })



    </script>
</body>
</html>